<template>
  <div class="app-content">
    <div class="search-content">
      <Title title="订单信息"></Title>

      <div class="search-input-content">
        <el-input
          v-model="queryParams.orderQuery"
          placeholder="可查询订单编号/业务员"
          size="small"
          class="search-input"
          @keyup.enter.native="handleQuery"
        >
        </el-input>

        <i class="el-icon-search search-icon" @click="handleQuery"></i>
        <i
          class="el-icon-circle-close search-icon"
          v-if="queryParams.orderQuery"
          @click="clear()"
        ></i>
      </div>
    </div>

    <div class="app-container">
      <el-table stripe :data="orderList">
        <el-table-column label="序号" prop="index" width="55">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单编号" align="center" prop="fromNo" />
        <el-table-column label="客户名称" align="center" prop="customerName">
          <template slot-scope="scope">
            <span>{{
              scope.row.customerName
                ? scope.row.customerName
                : scope.row.stpName
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="业务员" align="center" prop="salesman" />
        <!-- <el-table-column
          label="项目负责人"
          align="center"
          prop="projectManager"
        /> -->
        <el-table-column label="订单负责人" align="center" prop="nickName">
          <template slot-scope="scope">
            <span>{{
              scope.row.manager ? scope.row.manager.nickName : null
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单产品" align="center" prop="prdtStatus">
          <template slot-scope="scope">
            <el-button
              size="middle"
              type="text"
              @click="handleDetail(scope.row)"
              >产品明细</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="150"
        >
          <template slot-scope="scope">
            <div style="cursor: pointer">
              <el-tooltip
                class="item"
                popper-class="testtooltip"
                effect="light"
                content="负责人分配"
                placement="bottom"
              >
                <i
                  class="el-icon-my-people"
                  style="margin: 8px"
                  @click="handlePeople(scope.row)"
                  v-hasPermi="['order:info:edit']"
                ></i>
              </el-tooltip>
              <el-tooltip
                class="item"
                popper-class="testtooltip"
                effect="light"
                content="快速分配"
                placement="bottom"
              >
                <i
                  class="el-icon-my-fast"
                  style="margin: 8px"
                  @click="handleFast(scope.row)"
                  v-hasPermi="['oper:userValid:edit']"
                ></i>
              </el-tooltip>
              <el-tooltip
                class="item"
                popper-class="testtooltip"
                effect="light"
                content="精确分配"
                placement="bottom"
              >
                <i
                  class="el-icon-my-sure"
                  style="margin: 8px"
                  @click="handleSure(scope.row)"
                  v-hasPermi="['oper:userValid:edit']"
                ></i>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 负责人分配对话框 -->
      <el-dialog
        title="负责人分配"
        :visible.sync="peopleOpen"
        width="430px"
        append-to-body
      >
        <el-form
          ref="peopleForm"
          :model="peopleForm"
          label-width="100px"
          :rules="peopleRules"
        >
          <el-row>
            <el-form-item label="单位：" prop="deptType">
              <el-select
                v-model="peopleForm.deptType"
                placeholder="请选择"
                size="small"
                style="width: 250px"
                @change="getDepartment"
                :disabled="isEditFZR"
              >
                <el-option
                  v-for="item in deptOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <!-- 选择集成商1 2 只用选择一层部门 -->
          <div v-if="peopleForm.deptType == 1">
            <el-row>
              <el-form-item label="部门：" prop="deptId">
                <el-select
                  v-model="peopleForm.deptId"
                  popper-class="select-header-popper"
                  filterable
                  placeholder="请选择"
                  size="small"
                  style="width: 250px"
                  :disabled="isEditFZR"
                  @change="getPeople"
                >
                  <el-option
                    v-for="item in departmentOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="负责人：" prop="managerId">
                <el-select
                  v-model="peopleForm.managerId"
                  placeholder="请选择"
                  size="small"
                  filterable
                  style="width: 250px"
                >
                  <el-option
                    v-for="item in peopleListOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <i
                  class="el-icon-my-jian"
                  style="margin: 8px"
                  @click.prevent="remove()"
                  v-if="isEditFZR"
                ></i>
              </el-form-item>
            </el-row>
          </div>
          <div v-if="peopleForm.deptType == 0">
            <el-row>
              <el-form-item label="部门：" prop="deptId">
                <treeselect
                  v-model="peopleForm.deptId"
                  :disabled="isEditFZR"
                  :options="ownDeptOptions"
                  :normalizer="normalizer"
                  placeholder="选择部门"
                  style="width: 250px"
                  size="small"
                />
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="负责人：" prop="managerId">
                <el-select
                  v-model="peopleForm.managerId"
                  placeholder="请选择"
                  size="small"
                  filterable
                  :disabled="isEditFZR"
                  style="width: 250px"
                >
                  <el-option
                    v-for="item in peopleListOptions1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <i
                  class="el-icon-my-jian"
                  style="margin: 8px"
                  @click.prevent="remove()"
                  v-if="isEditFZR"
                ></i>
              </el-form-item>
            </el-row>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelPeople" size="small">取消</el-button>
          <el-button type="danger" @click="submitPeople" size="small"
            >确定</el-button
          >
        </div>
      </el-dialog>

      <!-- 快速分配对话框 -->
      <el-dialog
        title="快速分配"
        :visible.sync="fastOpen"
        width="430px"
        append-to-body
      >
        <el-form ref="fastForm" :model="fastForm" label-width="100px">
          <el-row>
            <el-form-item
              v-for="(domain, index) in fastForm.userIds"
              label="实施人员"
              :key="domain.key"
              :prop="'userIds.' + index + '.value'"
              :rules="{
                required: true,
                message: '请选择',
                trigger: 'blur',
              }"
            >
              <el-select
                v-model="domain.value"
                placeholder="请选择"
                size="small"
                filterable
                style="width: 220px"
              >
                <el-option
                  v-for="item in fastPeopleOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <i
                class="el-icon-my-plus"
                style="margin: 8px"
                @click.prevent="addDomain()"
                v-if="index == fastForm.userIds.length - 1"
              ></i>
              <i
                class="el-icon-my-jian"
                style="margin: 8px"
                @click.prevent="removeDomain(domain)"
              ></i>
            </el-form-item>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelFast" size="small">取消</el-button>
          <el-button type="danger" @click="submitFast" size="small"
            >确定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Title from "../../components/title";
// import orderList from "../../../static/order/orderList.json";
import { getProductList, groupProducts } from "@/api/product/information";
import {
  getOrderList,
  getFastDealUser,
  updateManager,
  fastDeal,
  validOperUser,
  validPersonalNum,
} from "@/api/order/order";
// import { getSysCompanyUserList, getCustomerCompanyList } from "@/api/user/our";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listUser } from "@/api/system/user";

export default {
  name: "order",
  components: { Title, Treeselect },
  data() {
    return {
      title: "订单管理",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      orderList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      fastOpen: false,
      peopleOpen: false,
      // 类型数据字典
      statusOptions: [],
      // 状态数据字典
      typeOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderQuery: null,
      },
      // 表单参数
      form: {},
      fastForm: {
        userIds: [
          {
            value: "",
          },
        ],
      },
      peopleForm: {
        // deptType: "0",
      },
      // 表单校验
      fastRules: {
        groupName: [
          { required: true, message: "组合名称不能为空", trigger: "blur" },
        ],
      },
      ownDeptOptions: [],
      deptOptions: [
        {
          value: "1",
          label: "集成商",
        },
        // {
        //   value: "2",
        //   label: "客户",
        // },
        {
          value: "0",
          label: "本公司",
        },
      ],
      departmentOptions: [],
      peopleListOptions: [],
      peopleListOptions1: [],
      peopleOptions: [],
      peopleOptions1: [],
      fastPeopleOptions: [], //快速分配实施人员
      length: 0,
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          console.log(node, "===========");
          let nodes = [];
          // 调接口展示下一层数据
          listUser({ deptId: node.value }).then((res) => {
            let data = res.rows;
            let options = [];
            data.forEach((e) => {
              options.push({
                value: e.userId,
                label: e.nickName,
                leaf: true,
              });
            });
            nodes = options;
            resolve(nodes);
          });
        },
      },
      peopleRules: {
        deptType: [{ required: true, message: "请选择单位", trigger: "blur" }],
        deptId: [{ required: true, message: "请选择部门", trigger: "blur" }],
        managerId: [
          { required: true, message: "请选择负责人", trigger: "blur" },
        ],
      },
      isEditFZR: false,
      isEditFast: false,
      orderId: "", // 当前弹框订单id
    };
  },
  created() {
    this.getList();
    // 获取本单位下的全部部门
    this.getOwnDeptList();
    // 获取下拉框数据
    this.getDepartmentOptions();
  },
  watch: {
    // 监听deptId
    "peopleForm.deptId": "currDeptChange",
  },
  methods: {
    // 查询产品信息列表
    getList() {
      // getOrderList(this.queryParams).then((response) => {
      this.$axios.get("/static/authLogin/order/orderList.json").then((res) => {
        this.orderList = res.data.rows;
        this.total = res.data.total;
      });
    },
    // 获取本公司部门数据
    getOwnDeptList() {
      // 本公司
      // getCustomerCompanyList({ deptType: 0 }).then((res) => {
      this.$axios
        .get("/static/authLogin/order/ourSelectTree.json")
        .then((res) => {
          let tempData = [];
          res.data.rows.forEach((e) => {
            tempData.push({
              deptId: e.deptId,
              deptName: e.deptName,
              children: e.children,
              parentId: e.parentId,
            });
          });
          this.ownDeptOptions = this.handleTree(tempData, "deptId");
        });
    },
    // 获取deptType1,2部门
    getDepartmentOptions(e) {
      // getCustomerCompanyList({ deptType: e }).then((response) => {
      this.$axios
        .get("/static/authLogin/order/customerSelect.json")
        .then((res) => {
          let data = res.data.rows;
          let options = [];
          data.forEach((e) => {
            options.push({
              value: e.deptId,
              label: e.deptName,
            });
          });
          console.log(options);
          this.departmentOptions = options;
        });
      // });
    },
    //-------------------------------负责人分配-----------
    // 负责人分配弹框
    handlePeople(row) {
      this.peopleOpen = true;
      this.orderId = row.id;
      this.peopleForm.id = row.id;
      // console.log(row);
      // 如果编辑有数据回显数据
      if (row.managerId) {
        this.isEditFZR = true;
        // console.log(row.manager.userType, "[[[[[[[[[[[[[");
        let deptType =
          row.manager.userType == "00"
            ? "0"
            : row.manager.userType == "1"
            ? "1"
            : "2";
        // 获取部门回显数据+获取人员回显数据
        if (deptType == 1) {
          this.getDepartmentOptions(deptType);
          this.getPeopleOptions(row.manager.deptId);
        } else {
          this.getOwnDeptList();
          this.getPeopleOptions1(row.manager.deptId);
        }
        this.peopleForm = {
          deptType: deptType,
          managerId: row.managerId,
          deptId: row.manager.deptId,
        };
      } else {
        this.isEditFZR = false;
        this.peopleForm = {};
      }
    },
    // 根据负责人单位获取负责人部门
    getDepartment(value) {
      console.log(value, "-------------------");
      // 每次选择清空部门和负责人选项
      this.peopleForm = {
        // deptId: "",
        managerId: "",
        deptType: value,
      };
      if (value == 1 || value == 2) {
        // 集成商1
        this.getDepartmentOptions(value);
      } else {
      }
    },
    // 本公司-根据选中的部门-获取下属的负责人
    getPeople(value) {
      // console.log("hererer");
      // 每次切换-清空负责人
      this.peopleForm = {
        deptId: value,
        managerId: "",
        deptType: this.peopleForm.deptType,
      };
      this.getPeopleOptions(value);
    },
    // select-tree值变化时
    currDeptChange(val) {
      if (val) {
        this.getPeopleOptions1(val);
      }
    },
    expandChange(id) {
      console.log("--------");
      // 根据id查询用户，并添加到options里
      const params = {
        // ...this.queryParams,
        deptId: id,
        // deptType: this.deptType
      };
      listUser(params).then((response) => {
        // 1-拼凑children里面内容
        let data = response.rows;
        let options = [];
        data.forEach((e) => {
          options.push({
            value: e.userId,
            label: e.nickName,
          });
        });
        // 2-查询option里value=id的，给他添加children
        this.peopleOptions1.forEach((e) => {
          if (e.value == id) {
            e.children = options;
          }
        });
        // this.peopleList = response.rows;
      });
    },
    // 提交分配负责人
    submitPeople() {
      this.$refs["peopleForm"].validate((valid) => {
        if (valid) {
          console.log(this.peopleForm.managerId);
          let params = {
            id: this.orderId,
            managerId: this.peopleForm.managerId,
          };
          if (this.peopleForm.deptType == 0) {
            params.managerId = this.peopleForm.managerId;
          }
          console.log(params, "000000");
          debugger;
          // updateManager(params).then((res) => {
          //   if (res.code == 200) {
          //     this.msgSuccess("操作成功");
          //     this.peopleOpen = false;
          //     this.getList();
          //     this.resetForm("peopleForm");
          //   } else {
          //     this.$message.error(res.msg);
          //   }
          // });
          this.$axios.put("/put", params).then((res) => {
            console.log(res);
          });
        }
      });
    },
    // 负责人修改-删除
    remove() {
      // 判断是否有实施人员
      validOperUser({ orderId: this.orderId }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          // this.$message.success(res.msg);
          // 重置表单-部门和负责人，状态为新建
          this.peopleForm = {
            deptType: this.peopleForm.deptType,
            managerId: "",
            // deptId: "",
          };
          this.isEditFZR = false;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 取消负责人
    cancelPeople() {
      this.peopleOpen = false;
      this.resetForm("peopleForm");
    },
    // ---------快速分配-------
    // 弹框
    handleFast(row) {
      if (!row.manager) {
        this.$message.warning("请先分配订单负责人");
        return false;
      }

      this.fastOpen = true;
      // this.fastForm.orderId = row.id;
      // 清除弹框
      this.fastForm = {
        orderId: row.id,
        userIds: [
          {
            value: "",
          },
        ],
      };
      // 获取公司下的用户
      listUser({ deptId: row.manager.deptId }).then((res) => {
        let data = res.rows;
        let options = [];
        data.forEach((e) => {
          options.push({
            value: e.userId,
            label: e.nickName,
          });
        });
        this.fastPeopleOptions = options;
      });
      // 获取快速分配人员-回显实施人员
      getFastDealUser({ orderId: row.id }).then((res) => {
        console.log("====", res.data);
        if (res.data.length != 0) {
          // 回显数据不为空--表示是编辑模式
          this.isEditFast = true;
          this.fastForm.userIds = [];
          // console.log("-------");
          res.data.forEach((e) => {
            this.fastForm.userIds.push({
              value: e.operUser,
              key: e.id,
            });
          });
        } else {
          this.isEditFast = false;
        }
        console.log(this.fastForm.userIds);
      });
    },
    // 弹框删除
    removeDomain(item) {
      // 判断是否是编辑模式的删除，如果是，需要校验
      console.log(item, "++++++++++++");
      // 如果删除的内容是空 可以直接删除
      if (item.value == "") {
        var index = this.fastForm.userIds.indexOf(item);
        if (index !== -1) {
          this.fastForm.userIds.splice(index, 1);
        }
      } else {
        if (this.isEditFast) {
          // console.log(item, "====================", item.value);
          const params = {
            userId: item.value,
            orderId: this.fastForm.orderId,
          };
          validPersonalNum(params).then((res) => {
            console.log(res.data, "[[[[[[[[[[[[[[[[");
            if (res.data) {
              this.$message.error("该人员已有实施数量无法删除");
            } else {
              var index = this.fastForm.userIds.indexOf(item);
              if (index !== -1) {
                this.fastForm.userIds.splice(index, 1);
              }
              // 如果弹框删除之后 已经没有行了，自动添加一行
              // if (this.fastForm.userIds.length == 0) {
              //   this.fastForm.userIds.push({
              //     value: "",
              //     key: Date.now(),
              //   });
              // }
            }
          });
        } else {
          var index = this.fastForm.userIds.indexOf(item);
          if (index !== -1) {
            this.fastForm.userIds.splice(index, 1);
          }
        }
      }
      // debugger;
    },
    // 弹框添加
    addDomain() {
      this.fastForm.userIds.push({
        value: "",
        key: Date.now(),
      });
    },
    // 弹框取消
    cancelFast() {
      this.fastOpen = false;
      this.resetForm("fastForm");
    },
    // 快速分配提交
    submitFast() {
      this.$refs["fastForm"].validate((valid) => {
        if (valid) {
          console.log("快速分配表单", this.fastForm.userIds);
          let ids = [];
          this.fastForm.userIds.forEach((e) => {
            ids.push(e.value);
          });
          const params = {
            orderId: this.fastForm.orderId,
            userIds: ids.toString(),
          };
          console.log(params);
          debugger;
          fastDeal(params).then((res) => {
            if (res.code == 200) {
              this.msgSuccess("分配成功");
              this.fastOpen = false;
              this.queryParams.pageNum = 1;
              this.getList();
              this.resetForm("fastForm");
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    //------精确分配-------------
    //精确分配
    handleSure(row) {
      if (!row.manager) {
        this.$message.warning("请先分配订单负责人");
        return false;
      }
      // this.$router.push({
      //   path: "/order/sure",
      //   query: { fromNo: row.fromNo, id: row.id, deptId: row.manager.deptId },
      // });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        groupName: undefined,
      };
      this.resetForm("form");
    },
    // 搜索按钮操作
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      console.log("多选框选中数据");
      this.ids = selection.map((item) => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    //提交按钮
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const params = {
            ...this.form,
            prdtIds: this.ids.join(),
          };
          debugger;
          groupProducts(params).then((res) => {
            if (res.code == 200) {
              this.msgSuccess("提交成功");
              this.open = false;
              this.getList();
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    // 获取产品的组合信心-0-组合编号，1-组合名称
    getProductFormat(data, a) {
      console.log(data);
      if (a == 0) {
        return data.groupCode;
      } else {
        return data.groupName;
      }
    },
    //-------------------------辅助-----------------
    // 转换部门数据结构
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children,
      };
    },

    // 获取用户信息options
    getPeopleOptions(value) {
      const params = {
        deptId: value, //3058-上海市公安局一部大队
      };
      // listUser(params).then((response) => {
      this.$axios
        .get("/static/authLogin/order/juserSelect.json")
        .then((res) => {
          // 1-拼凑children里面内容
          let data = res.data.rows;
          let options = [];
          data.forEach((e) => {
            options.push({
              value: e.userId,
              label: e.nickName,
            });
          });
          // console.log(options, "人员选项");
          this.peopleListOptions = options;
        });
    },
    // 获取集成商本公司
    getPeopleOptions1(value) {
      const params = {
        deptId: value, //2-总裁办公室
      };
      // listUser(params).then((response) => {
      this.$axios.get("/static/authLogin/order/ourSelect.json").then((res) => {
        let data = res.data.rows;
        let options = [];
        data.forEach((e) => {
          options.push({
            value: e.userId,
            label: e.nickName,
          });
        });
        this.peopleListOptions1 = options;
      });
    },
    // 清空
    clear() {
      (this.queryParams.orderQuery = ""), this.handleQuery();
    },
    // 跳转-产品明细页面-路由传参
    handleDetail(row) {
      this.$router.push({
        path: "/product/orderDetail",
        query: { fromNo: row.fromNo },
      });
    },
  },
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.search-content {
  display: flex;
  // background-image: url("../../../assets/images/title.png") no-repeat;
  height: 50px;
  width: 100%;
  background: #fff;
  font-size: 18px;
  font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  font-weight: 600;
  text-align: left;
  color: #333333;
  border-bottom: 2px solid #f5f7fa;
  justify-content: space-between;
  .search-input {
    width: 196px;
    height: 30px;
    // margin: auto 20px;
    margin-left: 10px;
  }
}
::v-deep .search-input .el-input__inner {
  // border-radius: 16px;
  border: 0px;
}
.groupBtn {
  width: 80px;
  height: 32px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  // background-image: url("../../assets/images/product/btn.png");
  // background-size: cover;
  background: #e60012;
  margin-bottom: 10px;
}
// 按钮文字居中
::v-deep .groupBtn {
  position: relative;
  span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>

<style lang="scss">
//不要定义 scoped
//修改icon
.el-icon-my-people {
  background: url("../../../assets/images/order/icon1.png") center no-repeat;
  font-size: 16px;
  background-size: cover;
}
.el-icon-my-people:before {
  content: "替";
  font-size: 16px;
  visibility: hidden;
}

.el-icon-my-fast {
  background: url("../../../assets/images/order/icon2.png") center no-repeat;
  font-size: 16px;
  background-size: cover;
}
.el-icon-my-fast:before {
  content: "替";
  font-size: 16px;
  visibility: hidden;
}

.el-icon-my-sure {
  background: url("../../../assets/images/order/icon3.png") center no-repeat;
  font-size: 16px;
  background-size: cover;
}
.el-icon-my-sure:before {
  content: "替";
  font-size: 16px;
  visibility: hidden;
}

.el-icon-my-plus {
  background: url("../../../assets/images/order/plus.png") center no-repeat;
  font-size: 16px;
  background-size: cover;
}
.el-icon-my-plus:before {
  content: "替";
  font-size: 16px;
  visibility: hidden;
}

.el-icon-my-jian {
  background: url("../../../assets/images/order/jian.png") center no-repeat;
  font-size: 16px;
  background-size: cover;
}
.el-icon-my-jian:before {
  content: "替";
  font-size: 16px;
  visibility: hidden;
}
// ::v-deep .el-button .el-button--default .el-button--mini {
//   border: 0px;
// }

// tooltip
.el-tooltip__popper[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: #d3d3d6 !important;
}

.el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after {
  border-bottom-color: #fff !important;
}
.testtooltip {
  background: white !important;
  border-color: #d3d3d6 !important;
  height: 30px;
  line-height: 10px;
  // box-shadow: 1px 1px 10px 3px #d3d3d6;
}

// 下拉框
// .select-header-popper {
//   max-width: 300px !important;
//   min-width: 100px !important;
//   .el-select-dropdown__wrap {
//     overflow-y: auto !important;
//   }
// }
</style>

